import { createApp } from 'vue'
import { createRouter,createWebHashHistory } from 'vue-router'
import App from './App.vue'
// 1. 定义路由组件
import Home from './components/Home.vue'
import Course87 from './components/Course8-7.vue'
// 2.定义路由配置
const routes = [
    {
      path: '/',
      redirect: () =>{
        return {
          path: '/home'
        }
      },
      meta: {
        auth: true
      }
    },
    {
      path: '/home',
      component: Home
    },
    {
      path: '/Course8-7',
      component: Course87
    },
    {
      path: '/Course8-8',
      component: () => import('./components/Course8-8.vue')
    },
    {
      path: '/Course8-8/:id',
      component: () =>import('./components/Course8-8.vue')
    },
    {
      path: '/Course8-9',
      component: () =>import('./components/Course8-9.vue'),
      meta: {
        title: 'Vue3样式绑定',
        auth: true
      }
    },
    {
      path: '/Course8-10',
      component: () =>import('./components/Course8-10.vue'),
      meta: {
        title: 'Vue3事件处理',
        auth: false
      }
    },
    {
      path: '/test',
      redirect: (to) => {
        console.log(to)
        return {
          path: '/Course8-9'
        }
      }
    },
    {
      path: '/Course8-11',
      component: () =>import('./components/Course8-11.vue'),
      children: [
        {
          path: '/Course8-11/child',
          component: () =>import('./components/Course8-12-Child.vue'),
        }
      ]
    },
    {
      path: '/403',
      component: import('./components/403.vue')
    },
]
// 3.创建一个路由实例
const router = createRouter({
  history: createWebHashHistory(),
  // routes: routes
  routes
})
// 给路由对象增加一个前置守卫
router.beforeEach((to, from) => {
  console.log(to, from)
  // 全局修改html.title的值
  if(to.meta.title) {
    document.title = to.meta.title
  }
  // 进行一些权限拦截和处理
  if(to.meta.auth === false) {
    return {
      path: '/403'
    }
  }
  return true
})
// 4.创建一个vue实例
const vm = createApp(App)
// 5.将路由实例注册到vue实例中
vm.use(router)
// 6.将vue实例挂载到#app节点上
vm.mount('#app')